<script type="text/javascript">
	var userArray = new Array();
	var action = 'mapping';
</script>
<div class='form_container' style='width: 570px; float: left'>
	<div style='margin-bottom: 10px; padding: 5px;'>
		<span class='label'>{translate}EMPLOYEE CREATE WORKING CALENDAR{/translate}</span>
	</div>
	<div style='padding: 2px;'>
		<span id="status_message" style="font-style: italic; color: red;"></span>
	</div>
	<div style='padding: 5px; margin-bottom: 10px;'>
		<span class='label'>{translate}Role{/translate}</span>
		<select id="select_employee_type" name="select_employee_type" onchange="javascript:getUsersByEmployeeType();">
			{html_options options=$employee_type_list selected=$nursing}
		</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span class='label'>{translate}Name{/translate}</span>
		<select id="select_employee" name="select_employee" onchange="javascript:getRelationalUsers();">
		</select>
	</div>
	<div id="relational_user_list"  >
		<table id="user_tbl" class="grid" cellspacing="0" cellpadding="0" width="100%">
			<caption><font size='2'>{translate}LIST OF EMPLOYEES HAVE RIGHT TO CREATE WORKING CALENDAR{/translate}</font></caption>
			<thead>
				<tr><th>{translate}Name{/translate}</th>
					<th>{translate}Role{/translate}</th>
					<th>{translate}Act{/translate}</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>
<div id='search_div' class='form_container' style='width: 350px; display: none; float: right'>
	<div style='margin-bottom: 10px; padding: 5px;'>
		<span class='label'>{translate}SELECT ADDITION EMPLOYEES{/translate}</span>
	</div>
		<div style='padding: 2px;'>
		<span id="search_message" style="font-style: italic; color: red;"></span>
	</div>
	<div style='padding: 5px; margin-bottom: 10px;'>
		<span class='label'>{translate}Role{/translate}</span>
		<select id='employee_type_search' name='employee_type_search' onchange='javascript:getEmployeeToAdd();'>
			{html_options options=$employee_type_list selected=$doctor} 
		</select>
	</div>
	<div id='searchResult' style=' display: none;'> 
		<table id='searchResultTbl' class="grid" cellspacing="0" cellpadding="0" style='width: 100%'>
			<thead>
				<tr>
					<th>{translate}Name{/translate}</th>
					<th align='center'>{translate}Act{/translate}</th>
				</tr>
			</thead>
			<tbody>
			</tbody>	
		</table>
	</div>

</div>
